<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>日历</title>
</head>
<body>
  <style>
    body{
      background: url('./imgs//bac.jpeg') no-repeat;
      background-size: 100% 100%;
    }
    .container{
      height: 600px;
      width: 1000px;
      border: 1px solid rgba(137, 43, 226, 0.295);
      margin: 80px auto 120px;
      /* position: relative; */
      border-radius: 15px;
      box-shadow:inset 0px 0px 30px 10px black;
      background-color: rgba(65, 86, 179, 0.61);
    }
    table{
      width: 1000px;
      text-align: center;
      padding: 20px 0;
      cursor: pointer;
      /* transform: translateX(-1000px); */
    }
    tr,td,th{
      border-bottom: 1px solid rgba(128, 128, 128, 0.568);
      height: 50px;
      padding:0;
      transition: all ease-in .31s;
    }
    th{
      border-top: 1px solid;
    }
    td{
      color: rebeccapurple;
      font-weight: 550;
      z-index: 99;
      /* line-height: 30px; */
    }
    table td:hover{
      background-color: rgba(221, 100, 20, 0.932);
    }
    .title{
      text-align: center;
      margin: 30px 0;
    }
    .title span{
      color: wheat;
      font-size: 20px;
    }
    button{
      height: 140px;
      width: 200px;
      position: absolute;
      font-size: 50px;
      outline: none;
      border: none;
      top: 40%;
      color: rgb(168, 202, 224);
      background-color: transparent;
    }
    button:hover{
      background-color: rgba(85, 80, 80, 0.589);
    }
    #toLeft{
      left: 20px;
      /* top:75px; */
    }
    #toRight{
      right: 20px;
      /* top: 75px; */
    }
    .table{
      display: flex;
      flex-wrap: nowrap;
      /* overflow: hidden; */
    }
    .nongli{
      font-size: 12px;
      /* background-color: aqua; */
      color: yellowgreen;
      margin-top: 0px;
    }
    .yangli{
      font-size: 20px;
      margin: 0;
      margin-top: 5px;
    }
    #today{
      position:absolute ;
      top: -12px;
      right: 0;
      color: violet;
    }
    .jieri{
      font-size: 12px;
      color: rgb(13, 218, 91);
      margin-top: 0px;
    }
    .name{
      font-size: 25px;
      font-family:Verdana, Geneva, Tahoma, sans-serif;
      font-weight: 500;
      color: white;
      text-align: center;
      margin-top: 10px;
    }
  </style>
  <div class="container" >
    <p class="name">中国日历</p>
    <button id="toLeft"><<</button>
    <button id="toRight">>></button>
    <div class="title">
      <span id="year"></span>
      <span>年</span>
      <span id="month"></span>
      <span>月</span>
      <span id="day_num"></span>
    </div>
    <div class="table">
      <table  cellpadding="0" cellspacing="0" class="data" id="table">
        <tr>
          <th>日</th>
          <th>一</th>
          <th>二</th>
          <th>三</th>
          <th>四</th>
          <th>五</th>
          <th>六</th>
        </tr>
        <tr>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
        </tr>
        <tr>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
        </tr>
        <tr>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
        </tr>
        <tr>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
        </tr>
        <tr>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
          <td><p></p></td>
        </tr>
      </table>   
    </div>
  </div>
  <script src="./js/tools.js"></script>
  <script src="./js/calcNongli.js"></script>
  <script src="./js/index.js"></script>
</body>
</html>